<!-- 图片列表-样式 -->
<template>
    <layout-pane label="样式">
        <div class="row-item">
            <div class="col-item">
                <div class="album-list-show mode-0" :class="{ 'active': mode === 0 }" @click="mode = 0">
                    <div class="image-wrap"></div>
                    <p class="title-wrap">标题</p>
                </div>
            </div>
            <div class="col-item">
                <div class="album-list-show mode-1" :class="{ 'active': mode === 1 }" @click="mode = 1">
                    <div class="image-wrap"></div>
                    <p class="title-wrap">标题</p>
                </div>
            </div>
        </div>
    </layout-pane>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import LayoutPane from '@/components/setting-pane/layout-pane'
export default defineComponent({
    name: 'AlbumMode',
    components: {
        LayoutPane
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        const mode = computed({
            get: () => widget.value.widgetData.eles.customFeature.mode,
            set: val => widget.value.widgetData.eles.customFeature.mode = val
        })

        return {
            widget,
            mode
        }
    }
})
</script>

<style lang="less" scoped>
.row-item {
    display: flex;
    align-items: center;
    .col-item {
        & + .col-item {
            margin-left: 12px;
        }
    }
}
.album-list-show {
    display: inline-block;
    width: 70px;
    height: 70px;
    border: 1px solid var(--edit-border-color-darker);
    padding: 5px;
    margin: 0 10px 10px;
    vertical-align: top;
    box-sizing: content-box;
    cursor: pointer;
    &.active {
        border-color: var(--edit-color-primary);
    }
    &.mode-0 {
        .title-wrap {
            background-color: var(--edit-text-color-disabled);
            color: var(--edit-color-white);
        }
    }
    &.mode-1 {
        .title-wrap {
            background-color: var(--edit-bg-color);
        }
    }
    .image-wrap {
        width: 100%;
        height: 50px;
        background-color: var(--edit-border-color);
    }
    .title-wrap {
        text-align: center;
        height: 20px;
        line-height: 20px;
        color: var(--edit-text-color-regular);
    }
}
</style>